Ext.application({

    name:'Demo',

    launch:function (){

        // 定义模型
        Ext.define('Student',{
            extend:'Ext.data.Model',

            config:{

                fields:[
                    {name:'Id',type:'int'},
                    {name:'name',type:'string'},
                    {name:'age',type:'string'},
                    {name:'phone',type:'string'}
                ],
                proxy:{
                    type:'ajax',
                    api:{
                        read:'http://192.168.137.1:8080/Ajax/php/student.php?action=read',
                        create:'http://localhost:8080/Ajax/php/student.php?action=create',
                        update:'http://localhost:8080/Ajax/php/student.php?action=update',
                        destroy:'http://localhost:8080/Ajax/php/student.php?action=destroy'
                    },
                    reader:{
                        type:'json',
                        rootProperty:'users'
                    },
                    listeners:{
                        exception:function(proxy,response)
                        {
                            Ext.Msg.alert('gg',Ext.decode(response.responseText).message);
                        }
                    }
                }
            }

        });

        // 定义数据仓库
        var store = Ext.create('Ext.data.Store',{
            model:'Student',
            autoLoad:true
//            proxy:{
//                type:'ajax',
//                api:{
//                    read:'http://localhost:8080/Ajax/php/student.php?action=read',
//                    create:'http://localhost:8080/Ajax/php/student.php?action=create',
//                    update:'http://localhost:8080/Ajax/php/student.php?action=update',
//                    destroy:'http://localhost:8080/Ajax/php/student.php?action=destroy'
//                },
//                reader:{
//                    type:'json',
//                    rootProperty:'users'
//                },
//                listeners:{
//                    exception:function(proxy,response)
//                    {
//                        Ext.Msg.alert('gg',Ext.decode(response.responseText).message);
//                    }
//                }
//            }
//            data: [
//                {name:'1',age:'2',phone:'1'},
//                {name:'1',age:'1',phone:'1'}
//            ]
        });


        var templete = new Ext.XTemplate(

//            '<div class="class">',
//                '<div class="listHeader">',
//                    '<div class="title" style="width: 30%">姓名</div>',
//                    '<div class="title" style="width: 30%">年龄</div>',
//                    '<div class="title" style="width: 40%">电话号码</div>',
//                '</div>',
                '<tpl for=".">',
                    '<div class="students">',
                        '<div style="width: 20%">{name}</div> ',
                        '<div style="width: 20%">{age}</div>',
                        '<div style="width: 20%">{phone}</div>',
                        '<div style="width: 40%"><input type="button" class="normal_btn" id="deleteBtn" value="删除"/></div>',
                    '</div>',
                '</tpl>'
//            '</div>'
        );


//        var selectList = [{text: '10',value:'10'},{text: '11',value:'11'},{text: '12',value:'12'},{text: '13',value:'13'},{text: '14'},{text: '15'}]
        // 添加用户表单
        var addPanel = Ext.create('Ext.form.Panel',{

            modal:true,
            hideOnMaskTap:false,
            centered:true,
            height:270,
            width :'100%',
            layout:'vbox',
            items:[
                {
                   docked:'top',
                   xtype:'titlebar',
                   title:'添加学生'
                },{
                   xtype:'textfield',
                   id:'username',
                   name:'name',
                   label:'Name',
                   placeHolder:'请输入姓名',
                   required:true,
                   clearIcon:true
               },{
                   xtype:'textfield',
                   name:'age',
                   id:'userage',
                   label:'Age'
//                   options:selectList,
//                   autoSelect:true
               },{
                    xtype:'textfield',
                    id:'userphone',
                    name:'phone',
                    label:'Phone',
                    placeHolder:'请输入电话',
                    required:true,
                    clearIcon:true
                },{
                    xtype:'container',
                    height:50,
                    layout:{
                        type:'hbox',
                        align:'center',
                        pack:'center'
                    },
                    items:[
                        {
                            xtype:'button',
                            text:'确定',
                            handler:function (){

                                var student = Ext.create('Student',{
                                   name:Ext.getCmp('username').getValue(),
                                   age:Ext.getCmp('userage').getValue(),
                                   phone:Ext.getCmp('userphone').getValue()
                                });
                                addPanel.hide();
                                student.save();
                                store.load();
                                dataview.refresh();

                            }

                        },{
                            xtype:'spacer',
                            width:10

                        },{
                            xtype:'button',
                            text:'取消',
                            handler:function(){
                                addPanel.hide();
                            }
                        }
                    ]
                }
           ]
        });
        // 顶部工具栏
        var toolbar = Ext.create('Ext.Toolbar',{

             docked:'top',
             items:[

                 {
                     xtype:'button',
                     text:'添加',
                     handler:function(){
                          Ext.Viewport.add(addPanel);
                          addPanel.show();
                     }
                 }
             ]
        });
        var dataview = Ext.create('Ext.DataView',{

            items:toolbar,
            store:store,
            itemTpl:templete,
            listeners:{
                itemtap:function(mydataview,index,target,record,e){

                    var target = e.target;

                    if(target.id == 'deleteBtn'){
                        Ext.Msg.confirm('信息提示','确认删除此项吗？',function(buttonId,value,opt){
                            if(buttonId == 'yes'){
                                record.erase();
                                store.load();
                                dataview.refresh();
                            }
                        });
                    }
                }
            }
        });

        Ext.Viewport.add(dataview);
    }
})